<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/css/stylesheets/defaultcss.css">
    <link rel="stylesheet" type="text/css" href="css/css/stylesheets/index.css">
    <script src="js/flex.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="./js/swiper.min.js"></script>
</head>

<body>
    <div class="index_content ">
        <div class="bg">
            <img src="img/bg.png" alt="">
        </div>
        <div class="content_box">
            <div class="mine_award active">
                <a href="./html/mine_award.html">我的奖品</a>
            </div>
            <ul class="award_box" id="award_box">
                <li class="">
                    <div class="img">
                        <img src="img/1.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/2.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/3.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/4.png" alt="">
                    </div>
                </li>
                <li class="start_btn" id="start_btn">
                    <div class="img">
                        <img src="img/chou.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/5.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/6.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/7.png" alt="">
                    </div>
                </li>
                <li>
                    <div class="img">
                        <img src="img/8.png" alt="">
                    </div>
                </li>
            </ul>
            <div class="swiper-container winner_list">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="msg">
                            0消息内容消息内容消息内容消息内容消息内容消息内容消息内容
                        </div>
                        <div class="date">
                            2018-9-10
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="msg">
                            1消息内容消息内容消息内容消息内容消息内容消息内容消息内容
                        </div>
                        <div class="date">
                            2018-9-10
                        </div>
                    </div>
                </div>
            </div>
            <div class="award_title">
                <div class="text">
                    活动规则
                </div>
            </div>
            <div class="rule_box">
                1.活动时间：2018年9月18日至2018年12月31日。 </br>
                2.活动对象：本次活动为回馈联通用户福利，仅限联通用户可获得奖品，参与活动即有机会获奖，同一ID、姓名、手机号均视为同一用户。 </br>
                3.奖品获奖须知： </br>
                实物奖品：获得“iphone XR”的用户，请按照页面提示进行操作，我方工作人员一般会在7个工作日内与中奖客户电话联系确认并邮寄奖品，运费由我方承担。联系日起连续3个工作日内无法与中奖用户取得联系，视为用户自动放弃中奖资格。 </br>
                视频会员：获得“优酷会员一个月”，“爱奇艺会员一个月” 的用户，请按照中奖页面提示操作兑换。 </br>
                电子奖品：获得“平安意外险，屈臣氏面膜优惠券，信用卡新用户礼包，支付宝红包”用户请按页面提示进行领取。 </br>
                话费：将于次月底前直接充入中奖手机号码账户。 </br>
                4.订购须知：【订购】“名刊荟萃5元包”订购成功后，可至应用商店下载沃阅读客户端，登录订购包月的手机账户进行阅读。 </br>
                5.退订须知：</br>
                （1）【退订】“名刊荟萃5元包”业务支持随时退订，退订后次月不再扣费，您可下载沃阅读APP—订购包月的手机号进行登录—我的—我的消费—包月—点击退订即可。 </br>
                （2）拨打客服热线10010或者4008070025进行退订。</br>
                6.本次活动最终解释权归龙源创新数字传媒(北京)股份有限公司所有。
            </div>
        </div>
    </div>
    <!--话费  实物  会员-->
    <!--<div class="fixed_content " id="modal_good">
        <div class="bg_modal">
        </div>
        <div class="modal_detail">
            <div class="bg">
                <img src="img/modal1.png" alt="">
            </div>
            <div class="close">
                <img src="./img/close.png" alt="">
            </div>
            <div class="content_box">
                <div class="title">
                    恭喜中奖
                </div>
                <div class="award">
                    恭喜您获得<span>2元话费</span>
                </div>
                <div class="tips">
                    尊敬的用户，是否确认开通名家荟萃</br>
                    5元包并领取2元话费
                </div>
                <div class="form_box">
                    <form id="fform">
                        <div class="enter">
                            <input type="text" id="mobile_input" placeholder="请输入手机号码">
                        </div>
                        <div class="enter enter1">
                            <div class="code">
                                <input type="text" placeholder="请输入验证码">
                            </div>
                            <div class="code_btn">
                                <input type="button" value="获取验证码">
                            </div>
                        </div>
                    </form>
                    <div class="tips1">
                        奖品领取规则，请见本页活动内容说明
                    </div>
                    <div class="submit_btn" id="form_btn">
                        <span>立即开通并领取奖品</span>
                    </div>
                </div>
                <div class="rule_box ">尊敬的用户，请确定活动规则并领取奖品:
                    </br>一、请本人主动输入短信验证码确认。
                    </br>二、确认领取后，当月将开通名刊荟萃5元包，如不退订次月起自动续费。
                    </br>三、取得奖品将会在活动规定的时间内赠送，请保持通讯畅通。
                </div>
            </div>
        </div>
    </div>-->
    <!-- 链接类 -->
    <!--<div class="fixed_content " id="modal_link ">
        <div class="bg_modal ">
        </div>
        <div class="modal_detail ">
            <div class="bg ">
                <img src="img/modal.png " alt=" ">
            </div>
            <div class="close ">
                <img src="./img/close.png " alt=" ">
            </div>
            <div class="content_box ">
                <div class="title ">
                    恭喜中奖
                </div>
                <div class="award ">
                    恭喜您获得<span>支付宝红包</span>
                </div>
                <div class="form_box ">
                    <div class="img ">
                        <img src="img/lian2.png " alt=" ">
                    </div>
                    <div class="submit_btn ">
                        <a href="https://s.click.taobao.com/PVz83Nw ">领取奖品</a>
                    </div>
                </div>
            </div>
        </div>
    </div>-->
    <div class="fixed_content tips_modal " id="tips_modal">
        <div class="bg_modal ">
        </div>
        <div class="modal_detail ">
            <div class="bg ">
                <img src="img/tips.png " alt=" ">
            </div>
            <div class="close ">
                <img src="./img/close.png " alt=" ">
            </div>
            <div class="text ">
                已经订购过该包月，无法完成兑换
            </div>
        </div>
    </div>
</body>

</html>

<script type="text/javascript ">
    // $(".fixed_content .bg_modal ").height($(".index_content ").height());
    // $("#modal_good ").show()
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        autoplay: 1500,
        loop: true
    });
    //转盘
    var isRunning = false;
    $("#start_btn ").bind('click', function () {
        if (isRunning) return false;
        isRunning = true;
        //ajax请求
        //0-7
        changeGame(7)
    });
    var changeGame = function (awardIndex) {
        //7
        //转盘逻辑  li排列为按序排列，空间空格一位按钮，需要先找到页面对应下标awardIndex，再在滚动数组awardArr找到改中奖下标对应停止位置下标。
        var indexSelect = -1; //滚动下标
        var i = 0;
        var indexArr = [0, 1, 2, 3, 5, 6, 7, 8]; //页面li下标
        var awardIndex = indexArr[awardIndex]; //对应中奖下标
        var awardArr = [0, 1, 2, 5, 8, 7, 6, 3]; //滚动位置对应下标
        var nowIndex = 0;
        for (var k = 0; k < awardArr.length; k++) {
            if (awardArr[k] == awardIndex) {
                nowIndex = k //最终停止位置下标
            }
        }
        var awardNum = 30 * nowIndex + 240;
        var timer = setInterval(function () {
            indexSelect++;
            i += 30;
            indexSelect = indexSelect % 8;
            $(".award_box li:eq( " + awardArr[indexSelect] + ") ").addClass('active').siblings().removeClass(
                'active');
            if (i > awardNum) {
                clearInterval(timer);
                // $("#modal_good ").show();

                console.log($('#award_box li:eq(' + awardIndex + ') img').attr('src'))
                // 话费
                showModal(0, {
                    "name": "2元话费",
                    "img": "",
                    "link": "./html/success.html"
                })
                //链接
                // showModal(1, {
                //     "name": "平安意外险",
                //     "img": $('#award_box li:eq(' + awardIndex + ') img').attr('src'),
                //     "link": "https://m.xqb24.com/act/paywx?source=xqb-h5-rcwl"
                // })

                isRunning = false;
            }
        }, (100 + i))
    }
    //弹框  
    /*
    award : name, img, link
    {
        "name": "平安意外险",
        "img": $('#award_box li:eq(' + awardIndex + ') img').attr('src'),
        "link": "https://m.xqb24.com/act/paywx?source=xqb-h5-rcwl"
    }        
    */
    var showModal = function (type, award) {
        //award : name, img, link
        //0  话费  实物  会员
        // 1  链接
        console.log(award)
        if (type == 0) {
            $('body').append(
                '<div class="fixed_content " id="modal_good">                                                                   ' +
                '    <div class="bg_modal">                                                                                     ' +
                '    </div>                                                                                                     ' +
                '    <div class="modal_detail">                                                                                 ' +
                '        <div class="bg">                                                                                       ' +
                '            <img src="img/modal1.png" alt="">                                                                  ' +
                '        </div>                                                                                                 ' +
                '        <div class="close">                                                                                    ' +
                '            <img src="./img/close.png" alt="">                                                                 ' +
                '        </div>                                                                                                 ' +
                '        <div class="content_box">                                                                              ' +
                '            <div class="title">                                                                                ' +
                '                恭喜中奖                                                                                       ' +
                '            </div>                                                                                             ' +
                '            <div class="award">                                                                                ' +
                '                恭喜您获得<span>' + award.name +
                '</span>                                                                 ' +
                '            </div>                                                                                             ' +
                '            <div class="tips">                                                                                 ' +
                '                尊敬的用户，是否确认开通名家荟萃</br>                                                          ' +
                '                5元包并领取2元话费                                                                             ' +
                '            </div>                                                                                             ' +
                '            <div class="form_box">                                                                             ' +
                '                <form id="fform">                                                                              ' +
                '                    <div class="enter">                                                                        ' +
                '                        <input type="text" id="mobile_input" placeholder="请输入手机号码">                     ' +
                '                    </div>                                                                                     ' +
                '                    <div class="enter enter1">                                                                 ' +
                '                        <div class="code">                                                                     ' +
                '                            <input type="text" placeholder="请输入验证码">                                     ' +
                '                        </div>                                                                                 ' +
                '                        <div class="code_btn">                                                                 ' +
                '                            <input type="button" value="获取验证码">                                           ' +
                '                        </div>                                                                                 ' +
                '                    </div>                                                                                     ' +
                '                </form>                                                                                        ' +
                '                <div class="tips1">                                                                            ' +
                '                    奖品领取规则，请见本页活动内容说明                                                         ' +
                '                </div>                                                                                         ' +
                '                <div class="submit_btn" id="form_btn">                                                         ' +
                '                    <a href=' + award.link +
                '>立即开通并领取奖品</a>                                                            ' +
                '                </div>                                                                                         ' +
                '            </div>                                                                                             ' +
                '            <div class="rule_box ">尊敬的用户，请确定活动规则并领取奖品:                                       ' +
                '                </br>一、请本人主动输入短信验证码确认。                                                        ' +
                '                </br>二、确认领取后，当月将开通名刊荟萃5元包，如不退订次月起自动续费。                         ' +
                '                </br>三、取得奖品将会在活动规定的时间内赠送，请保持通讯畅通。                                  ' +
                '            </div>                                                                                             ' +
                '        </div>                                                                                                 ' +
                '    </div>                                                                                                     ' +
                '</div>                                                                                                         '
            )
        } else if (type == 1) {
            $('body').append(
                '<div class="fixed_content " id="modal_link ">                                              ' +
                '    <div class="bg_modal ">                                                                ' +
                '    </div>                                                                                 ' +
                '    <div class="modal_detail ">                                                            ' +
                '        <div class="bg ">                                                                  ' +
                '            <img src="img/modal.png " alt=" ">                                             ' +
                '        </div>                                                                             ' +
                '        <div class="close ">                                                               ' +
                '            <img src="./img/close.png " alt=" ">                                           ' +
                '        </div>                                                                             ' +
                '        <div class="content_box ">                                                         ' +
                '            <div class="title ">                                                           ' +
                '                恭喜中奖                                                                   ' +
                '            </div>                                                                         ' +
                '            <div class="award ">                                                           ' +
                '                恭喜您获得<span>' + award.name +
                '</span>                                          ' +
                '            </div>                                                                         ' +
                '            <div class="form_box ">                                                        ' +
                '                <div class="img ">                                                         ' +
                '                    <img src="' + award.img +
                '" alt=" ">                                     ' +
                '                </div>                                                                     ' +
                '                <div class="submit_btn ">                                                  ' +
                '                    <a href="' + award.link + '">领取奖品</a>             ' +
                '                </div>                                                                     ' +
                '            </div>                                                                         ' +
                '        </div>                                                                             ' +
                '    </div>                                                                                 ' +
                '</div>                                                                                     '
            )
        }
        verifyForm();
        $(".fixed_content .bg_modal ").height($(".index_content ").height());
        $(".fixed_content .close ").bind('click', function () {
            $(this).parent().parent().hide();
        })
    }
    //表单
    var verifyForm = function () {
        //表单登录  检验
        //检验手机号
        var mobileBoo = false;
        $('#mobile_input').bind('blur', function () {
            var re = /^1((3|4|5|6|7|9|5|8){1})\d{9}$/;
            if (!re.test($('#mobile_input').val())) {
                errorModal('请输入正确的手机号')
                mobileBoo = false;
            } else {
                mobileBoo = true;
                $('#mobile_input').css("placeholder ", '');
            }
        })
        //验证码
        var timer = null,
            str = 3;
        $(".code_btn input ").bind('click', function () {
            if (mobileBoo) {
                timeFuc()
                clearInterval(timer);
                timer = setInterval(function () {
                    timeFuc()
                }, 1000)
            } else {
                errorModal('请输入正确的手机号')
            }

        })

        var timeFuc = function () {
            if (str > 0) {
                str--;
                $(".code_btn input ").val(str + '秒后重发');
                $(".code_btn input ").attr('disabled', true);
                $(".code_btn input ").css({
                    'background': '#9d9e9e',
                    'color': '#fff'
                })
            } else {
                str = 3;
                $(".code_btn input ").val('获取验证码');
                clearInterval(timer);
                $(".code_btn input ").removeAttr('disabled');
                $(".code_btn input ").css({
                    'background': '#fbdc30',
                    'color': 'rgba(168, 14, 3, 0.8)'
                })
            }
        }
        var codeBoo = false;
        //提交表单
        $("#form_btn").bind('click', function () {
            if (mobileBoo == false) {
                errorModal('请输入正确的手机号')
                return false;
            }
            //校验验证码
            if ($.trim($(".code input").val().length) == 6) {
                //ajax校验代码
                codeBoo = true;
            } else {
                codeBoo = false;
                errorModal('请输入正确的短信验证码')
                return false;
            }
        })
    }
    var errorModal = function (text) {
        $("#tips_modal").show();
        $("#tips_modal .modal_detail .text").text(text);
    }
</script>